<template>
  <div class="head">
    <el-header>
      <div class="title">后台管理系统</div>
      <div class="user">
        <div class="img"><img :src="avatar" /></div>
        <div class="userName">{{ userName }}</div>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  computed: {
    userName() {
      return this.$store.state.user.userName;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
};
</script>

<style lang='scss'>
.head {
  .el-header {
    background-color: #333;
    color: #fff;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    div {
      margin: 0 15px;
    }
  }
  .title {
    font-size: 22px;
  }
  .user {
    display: flex;
    justify-content: space-between;
    .img {
      width: 50px;
      height: 50px;
      margin-top: 5px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}
</style>
